// import { combineReducers, compose, createStore } from "redux";
// import ReduxThunk from "redux-thunk";
// import { Component } from "react";
// import connect from "react-redux/es/connect/connect";
// import React from "react";
//
// let stateDefault = {
//     count: 0,
//     isFetching: false,
// };
//
// let countReducer = function (state = stateDefault, action) {
//     switch (action.type) {
//         case 'PLUS_ONE':
//             return { ...state, ...{ count: state.count + 1 } };
//         case 'PLUS_RANDOM_REQ':
//             return { ...state, ...{ isFetching: true } };
//         case 'PLUS_RANDOM_DONE':
//             return { ...state, ...{ isFetching: false, count: state.count + 1 } };
//         case 'PLUS_RANDOM_ERR':
//             return state;
//         default:
//             return state;
//     }
// };
//
// let headerReducer = function (state = {}, action) {
//     switch (action.type) {
//         default:
//             return state;
//     }
// };
//
// let reducer = combineReducers({
//     countReducer,
//     headerReducer
// });
//
// // action creator
// function plusOne() {
//     return {
//         type: 'PLUS_ONE',
//     }
// }
//
// function plusRandom() {
//     // 这里直接返回 func 交给 Thunk 处理
//     return function (dispatch) {
//         dispatch(plusRandomREQ())
//         setTimeout(function () {
//             dispatch(plusRandomDONE())
//         }, 2000);
//     }
// }
//
// function plusRandomTwice() {
//     return function (dispatch) {
//         dispatch(plusRandomREQ())
//         setTimeout(function () {
//             dispatch(plusRandom())
//         }, 2000);
//     }
// }
//
// function plusRandomREQ() {
//     return {
//         type: 'PLUS_RANDOM_REQ',
//     }
// }
//
// function plusRandomDONE() {
//     return {
//         type: 'PLUS_RANDOM_DONE',
//     }
// }
//
// const logger = (store) => {
//     // 这里的 next 就是 dispatch
//     return (next) => {
//         return (action) => {
//             console.group(action.type)
//             console.info('dispatching', action)
//             let result = next(action)
//             console.log('next state', store.getState())
//             console.groupEnd(action.type)
//             return result
//         }
//     }
// };
//
// function applyMiddleware(...middlewares) {
//     // (x) => (y) => (z) => {}
//     // function (x) {
//     //  return function(y) {
//     //     return function (z) {
//     //     }
//     //  }
//     // }
//     // 执行的时候由左向右
//     return (createStore) => (...args) => {
//
//         const store = createStore(...args);
//         let dispatch = () => {
//             throw new Error(
//                 `Dispatching while constructing your middleware is not allowed. ` +
//                 `Other middleware would not be applied to this dispatch.`
//             )
//         };
//
//         const middlewareAPI = {
//             getState: store.getState,
//             // 这里相当于是重新定义了 dispatch
//             dispatch: (...args) => dispatch(...args)
//         };
//
//         // 这里把 store 消化掉
//         // (store: {getState, dispatch}) => (dispatch) {}
//         const chain = middlewares.map(middleware => middleware(middlewareAPI));
//
//         // 相当于 chain1(chain2(next: store.dispatch))
//         // 那一坨调用 多半就是为了 middleware 可以进行嵌套
//         // 这里由内到外，把 next 给消化掉 返回的函数 和原始的 dispatch 接口相同
//         dispatch = compose(...chain)(store.dispatch);
//
//         return {
//             ...store,
//             dispatch
//         }
//     }
// }
//
// let fooMiddleware = function (store) {
//     // 这里的 next 就是 dispatch
//     return function (next) {
//         return function (action) {
//             let result = next(action);
//             return result
//         }
//     }
// };
//
// let logger2 = store => next => action => {
//     console.group(action.type)
//     console.info('dispatching', action)
//     let result = next(action)
//     console.log('next state', store.getState())
//     console.groupEnd(action.type)
//     return result
// };
//
// let store = createStore(
//     reducer,
//     // stateDefault,
//     applyMiddleware(ReduxThunk,)
// );
//
// // why middleware
// // const next = store.dispatch;
// // store.dispatch = function dispatchAndLog(action) {
// //   console.log('dispatching', action)
// //   let result = next(action)
// //   console.log('next state', store.getState())
// //   return result
// // };
//
// function patchStoreToAddLogging(store) {
//     const next = store.dispatch
//     store.dispatch = function dispatchAndLog(action) {
//         console.log('dispatching', action)
//         let result = next(action)
//         console.log('next state', store.getState())
//         return result
//     }
// }
//
// patchStoreToAddLogging(store);
//
// class Header extends Component {
//     render() {
//         let status;
//         if (this.props.isFetching) {
//             status = <span>loading</span>
//         } else {
//             status = ''
//         }
//
//         return (
//             <div>
//                 <span>count: {this.props.count}</span>,
//                 <button onClick={this.props.plusOne}>+1</button>,
//                 <button onClick={this.props.plusRandom}>+random</button>,
//                 <button onClick={this.props.plusRandomTwice}>+randomTwice</button>,
//                 {status}
//             </div>
//         )
//     }
// }
//
// function mapStateToProps(state) {
//     return {
//         count: state.countReducer.count,
//         isFetching: state.countReducer.isFetching,
//     }
// }
//
// function mapDispatchToProps(dispatch) {
//     return {
//         plusOne() {
//             dispatch(plusOne())
//         },
//         plusRandom() {
//             dispatch(plusRandom())
//         },
//         plusRandomTwice() {
//             dispatch(plusRandomTwice())
//         }
//     }
// }
//
// let HeaderConn = connect(mapStateToProps, mapDispatchToProps)(Header)
